<template>
	<view class="container">
		<view class="hader">
			<view class="login" v-show="user.email">
				<view class="name">{{user.email }}</view>
				<view class="cancellation" @tap="cancellationopen">Log out</view>
			</view>
			<view class="login" v-show="!user.email" @tap="loging">
				<view class="name">{{'Click login account' }}</view>
				<image class="img" src="../../static/images/向左.png"></image>

			</view>
			<view class="personal">Game Coin：{{ user.gold_coin }}</view>
			<!-- <view class="asset">
				<view class="assetitem">
					<view class="assetvalue">{{ user.gold_coin }}</view>
					<view class="assetitemname">可用金币</view>
				</view>
				<view class="assetitem">
					<view class="assetvalue">{{ 0 }}</view>
					<view class="assetitemname">可用抽奖次数</view>
				</view>
			</view> -->
			<view class="entrance" @tap="topayvip">
				<view class="entrancename">Top up the game gold</view>
				<view class="entrancebuttom">Top Up</view>
			</view>
		</view>   
		
		<view class="main">
			<view class="main_item" v-for="(item,index) in lists" @tap="toitemuse(item)">
				<image class="img1" :src=item.icon></image>
				<view class="name">{{ item.name }}</view>
				<image class="img2" src="../../static/images/向左.png"></image>
			</view>
		</view> 
		<!-- 联系客服· -->
		<uni-popup ref="servicepopup">
			<view class="rulepopup">
				<view class="plaque">Customer service</view>
				<view class="title">FaceBook：156415561511</view>
				<view class="accept" @tap="copyeamil">Copy account</view>
				<image class="close" @tap="closeservicepopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 规则 -->
		<uni-popup ref="rulepopup">
			<view class="rulepopup">
				<view class="plaque">Rule Description</view>
				<view class="scllow">
					<view class="RuleSubclass">Please login and purchase game coins before the draw begins;</view>
					<view class="RuleSubclass">A: How do I draw the prize?</view>
					<view class="RuleSubclass">1, Select the prize type at the top of the home page, click the draw button below, you can play the draw game, and consume the balance of the game currency in the account;</view>
					<view class="RuleSubclass">2, Draw 100% of the prize to get goods, the obtained goods can be viewed in the "winning record";</view>
					<view class="RuleSubclass">3, the obtained goods can choose the address and wait for express delivery;</view>
					<view class="RuleSubclass">B: About redemption of prizes?</view>
					<view class="RuleSubclass">1. For the goods you do not want, you can click "Exchange" game currency in "Winning Record", and the exchanged game currency will be automatically recharged into your account. Once the exchange is successful, it cannot be cancelled;</view>
					<view class="RuleSubclass"> One: How to draw the prize?</view>
					<view class="RuleSubclass">1, Select the prize type at the top of the home page, click the draw button below, you can play the draw game, and consume the balance of the game currency in the account;</view>
					<view class="RuleSubclass">2, Draw 100% of the prize to get goods, the obtained goods can be viewed in the "winning record";</view>
					<view class="RuleSubclass">3, the obtained goods can choose the address and wait for express delivery;</view>
					<view class="RuleSubclass">Two: About the redemption of prizes?</view>
					<view class="RuleSubclass">1. For the goods you do not want, you can click "Exchange" game currency in "Winning Record", and the exchanged game currency will be automatically recharged into your account. Once the exchange is successful, it cannot be cancelled;</view>
				</view>
				<image class="close" @tap="closerulepopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 退出登录弹框· -->
		<uni-popup ref="cancellation">
			<view class="rulepopup">
				<view class="plaque">Log out</view>
				<view class="text">Whether to log out and cancel the account information</view>
				<view class="judge">
					<view class="cancel" @tap="closecancellation">Cancel</view>
					<view class="confirm" @tap="LogOut">Definite exit</view>
				</view>
				<image class="close" @tap="closecancellation" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
  import { getrequest, postrequest,EventStatistics } from '../../util/api'	
  import {showDialog,closeDialog} from '../../util/dialog'
	export default {
		data() { 
			return {
				email:'', //电子邮件
				user:{},  //用户数据
				token:'', //token
				lists: [
					{
						icon:require('../../static/images/地址.png'),
						name:'Shipping Address',
						pages:'/pages/address/address'
					},	
					{
						icon:require('../../static/images/erji.png'),
						name:'Customer service',
						pages:'1'
					},	
					{
						icon:require('../../static/images/book.png'),
						name:'Rule description',
						pages:'2'
					},	
				],
			}
		},
		onLoad(){
			console.log('onLoad')
		},
		onShow(){
			this.email =  uni.getStorageSync('email') || ''
			this.token =  uni.getStorageSync('token') || ''
				// 弹出登录弹框弹框
				if(!this.token){
					showDialog()
				}
			// 请求用户数据
			this.getuserDetails()

		},
		// 页面隐藏
		onHide(){
			this.closeservicepopup()
			this.closerulepopup()
			this.closecancellation()
		},
		onReady(){

		},
		methods: {
			// 点击登录账户
			login(){
				showDialog()
			},
			// 请求用户数据
			async getuserDetails(){
				let params = {}
				const res = await getrequest('/api/user/user_info',params)
				console.log('用户信息',res)
				if( res &&res.code == 200){
					this.user = res.data
				}
			},
			toitemuse(item){
				if(item.pages == '1'){
					// 弹出联系客服的弹框
					this.openservicepopup()

				}else if(item.pages == '2'){
					// 弹出规则说明的弹框
					this.rulepopupopen()
				}else{
					// 如果没登录
					if(!this.token){
						// 登录框
						showDialog()
						return
					}
					// 跳转到收货地址
					uni.navigateTo({
						url: item.pages
					})
				}
			},
			// 复制账号
			copyeamil(){
				const that = this
				uni.setClipboardData({
					data: '156415561511',
					success: () => {
						// 关闭弹框
						that.closeservicepopup()
						uni.showToast({
							title: 'Copy successful',
							icon:'none',
						});
					},
					fail: (error) => {
					// console.error('复制失败', error);
						uni.showToast({
							title: 'copy failed',
							icon: 'none'
						});
					}
				});
			},
			// 跳转到会员页面
			topayvip(){
				// 如果没登录
				if(!this.token){
					// 登录框
					showDialog()
					return
				}
				uni.navigateTo({
					url:'/pages/payvip/payvip'
				})
			},
			// 联系客服
			openservicepopup(){
				this.$refs.servicepopup.open('center')
			},
			closeservicepopup(){
				this.$refs.servicepopup.close()
			},
			// 规则弹框
			rulepopupopen(){
				this.$refs.rulepopup.open('center')
			},
			closerulepopup(){
				this.$refs.rulepopup.close()
			},
			// 注销登录弹框
			cancellationopen(){
				// 事件统计
				EventStatistics('我的页面','注销登录弹框')
				this.$refs.cancellation.open('center')
			},
			closecancellation(){
				this.$refs.cancellation.close()
			},
			// 确认注销
			LogOut(){
				// 事件统计
				EventStatistics('我的页面','点击确认注销')
				this.user = {}
				// uni.clearStorage(); // 清空所有本地数据缓存（localStorage、sessionStorage）
				uni.setStorageSync('token','');
				this.closecancellation()
			},
			// 点击登录弹框
			loging(){
				// 登录框
				showDialog()
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgba(246, 246, 246, 1);
		.hader{
			width: 750rpx;
			// height: 370rpx;
			padding: 40rpx 0 0 0;
			background: url('../../static/images/myhader.png') no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
			.login{
				width: 750rpx;
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				.name{
					width: 580rpx;
					height: 70rpx;
					font-size: 32rpx;
					font-weight: 700;
					line-height: 70rpx;
					margin-left: 20rpx;
					color: rgba(44, 44, 44, 1);
					// border: 1px solid black;
				}
				.img{
					width: 34rpx;
					height: 34rpx;
					margin: 20rpx 30rpx 0 0;
					// border: 1px solid black;
				}
				.cancellation{
					width: 170rpx;
					height: 50rpx;
					border-radius: 20px 0px 0px 20px;
					background: linear-gradient(90deg, rgba(255, 141, 26, 1) 0%, rgba(255, 87, 51, 1) 100%);
					border: 1px solid rgba(255, 195, 0, 1);
					box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
					margin: 10rpx 0 0 0;
					font-size: 24rpx;
					line-height: 50rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
			}
			.personal{
				width: 700rpx;
				height: 90rpx;
				// border: 1px solid black;
				margin: 0 auto;
				margin-top: 20rpx;	
				font-size: 28rpx;
				line-height: 50rpx;
				color: rgba(44, 44, 44, 1);
			}

			.asset{
				width: 700rpx;
				height: 160rpx;
				// border: 1px solid black;
				margin: 0 auto;
				margin-top: 20rpx;
				display: flex;
				.assetitem{
					width: 350rpx;
					margin-top: 60rpx;
					height: 100rpx;
					border-right: 1px solid rgba(232, 232, 232, 1);
					text-align: center;
					color: rgba(44, 44, 44, 1);
					.assetvalue{
						width: 350rpx;
						height: 40rpx;
						font-size: 44rpx;
						font-weight: 700;
						line-height: 30rpx;
					}
					.assetitemname{
						width: 350rpx;
						height: 60rpx;
						font-size: 28rpx;
						line-height: 60rpx;
					}
				}
			}
			.entrance{
				width: 720rpx;
				height: 100rpx;
				border-radius: 8px;
				margin: 0 auto;
				margin-top: 12rpx;
				background: linear-gradient(270deg, rgba(31, 22, 21, 1) 0%, rgba(66, 56, 56, 1) 100%);
				box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				display: flex;
				justify-content: space-between;
				.entrancename{
					width: 400rpx;
					height: 60rpx;
					font-size: 30rpx;
					line-height: 100rpx;
					color: rgba(255, 255, 255, 1);
					text-align: left;
					margin: 0 0 0 40rpx;
					font-weight: 400;
				}
				.entrancebuttom{
					width: 200rpx;
					height: 70rpx;
					border-radius: 20px;
					background: linear-gradient(180deg, rgba(255, 232, 232, 1) 0%, rgba(255, 247, 245, 1) 100%);
					box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
					margin: 15rpx;
					font-size: 32rpx;
					line-height: 70rpx;
					color: rgba(173, 89, 5, 1);
					text-align: center;
				}
			}
			
		}
		.main{
			width: 720rpx;	
			margin: 0 auto;
			margin-top: 14rpx;
			margin-bottom: 80rpx;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			.main_item{
				width: 720rpx;	
				height: 100rpx;
				display: flex;
				border-bottom: 1px solid rgba(247, 249, 250, 1);
				.img1{
					width: 48rpx;
					height: 48rpx;
					margin: 26rpx;
				}
				.name{
					width: 500rpx;
					height: 100rpx;
					font-size: 32rpx;
					line-height: 100rpx;
					color: rgba(56, 56, 56, 1);
					margin-left: 20rpx;
				}
				.img2{
					width: 32rpx;
					height: 36rpx;
					margin: 34rpx 32rpx;
				}
			}
		}
		// 规则
		.rulepopup{
			width: 660rpx;
			// height: 600rpx;
			padding-bottom: 30rpx;
			background: linear-gradient(180deg, rgba(254, 249, 228, 1) 0%, rgba(255, 243, 212, 1) 100%);
			border-radius: 20rpx;
			position: relative;
			.plaque{
				width: 500rpx;
				height: 80rpx;
				margin: 0rpx 0 0 95rpx;
				background: url('../../static/images/牌匾.png');
				background-size: 100% 100%;
				font-size: 36rpx;
				line-height:84rpx;
				color: rgba(181, 50, 42, 1);
				text-align: center;
				font-weight: 700;
			}
			// 规则说明
			.scllow{
				width: 590rpx;
				height: 500rpx;
				// border: 1px solid black;
				margin: 0rpx 0 0rpx 40rpx;
				overflow: scroll;
				.RuleSubclass{
					width: 590rpx;
					font-size: 26rpx;
					color: rgba(56, 56, 56, 1);
					line-height: 70rpx;

				}
			}
			.title{
				width: 500rpx;
				height: 60rpx;
				font-size: 36rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 auto;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
			.imgs{
				width: 570rpx;
				height: 300rpx;
				margin: 45rpx;
				display: flex;
				.imgs_item{
					width: 200rpx;
					height: 200rpx;
					// border: 1px solid black;
					.img1{
						width: 170rpx;
						height: 140rpx;
						margin: 0 0 0 10rpx;
						// border: 1px solid black;
					}
					.text{
						width: 200rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 40rpx;
						color: rgba(214, 47, 47, 1);
						text-align: center;
					}
				}
				.img2{
					width: 76px;
					height: 20px;
					margin-top: 70rpx;
				}
			}
			.accept{
				width: 560rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 200rpx;
			}
			// 注销登录相关样式
			.text{
				width: 550rpx;
				font-size: 32rpx;
				line-height: 50rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 auto;
				margin-top: 80rpx;
				// border: 1px solid black;
			}
			.judge{
				width: 620rpx;
				height: 90rpx;
				margin: 0 auto;
				margin-top: 50rpx;
				// border: 1px solid black;
				display: flex;
				justify-content: space-between;
				.cancel{
					width: 280rpx;
					height: 80rpx;
					border-radius: 30px;
					border: 1px solid rgba(166, 166, 166, 1);
					font-size: 32rpx;
					line-height: 80rpx;
					color: rgba(128, 128, 128, 1);
					text-align: center;
				}
				.confirm{
					width: 280rpx;
					height: 80rpx;
					border-radius: 30px;
					background: rgba(232, 94, 63, 1);
					font-size: 32rpx;
					line-height: 80rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: -70rpx;
				left: 300rpx;
				// margin: 420rpx 0 0 300rpx;
			}
		}
	}
</style>
